import { ref } from 'vue';
import './reset-element.scss';
import './common.scss';
import { ElButton } from 'element-plus';
import ZwUnityKitCertificateUpload from '../../src/ZwUnityKitCertificateUpload/Index.vue';

window.domainApi = 'https://payhub-api-dev.keyid.cn';

export default {
    title: 'Scrm System/ZwUnityKitCertificateUpload Library/ZwUnityKitCertificateUpload',
    component: ZwUnityKitCertificateUpload,
    tags: ['autodocs'],
    argTypes: {
        modelValue: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '上传的图片CODE，支持单张和多张，单张时数据类型为string，多张时为array'
        },
        imageList: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description:
                '上传的图片URL地址，支持单张和多张，单张时数据类型为string，多张时为array，里面对象需要包含code和url，比如[{code: "xxx", url: "https://xxx.jpg"}]'
        },
        validateTips: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '文件不符合限制条件时的提示文案'
        },
        uploadLabel: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '上传按钮文字'
        },
        uploadTips: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '上传提示文案'
        },
        limitNum: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description: '允许上传文件的最大数量，默认为1，选择ocr识别时限制为1'
        },
        limitSize: {
            control: { type: 'number' },
            type: { name: 'number', required: false },
            description: '允许上传文件的大小限制，默认为1（M）'
        },
        limitFormat: {
            control: { type: 'array' },
            type: { name: 'array', required: false },
            description: '图片的格式限制，默认为 JPG、BMP、PNG'
        },
        ocrType: {
            control: { type: 'radio' },
            type: { name: 'radio', required: false },
            options: [
                'RESIDENT_CARD_NATIONAL_EMBLEM',
                'RESIDENT_CARD_NATIONAL_HEAD',
                'LICENSE',
                'BANK_ACCOUNT_PERMIT',
                'BANK_CARD'
            ],
            description:
                'ocr类型，默认为空，此时，即不需要ocr识别，上传图片数自动限制为1张，传参后通过submit事件返回识别到的数据  RESIDENT_CARD_NATIONAL_EMBLEM 身份证国徽面  RESIDENT_CARD_NATIONAL_HEAD 身份证人头面  LICENSE 营业执照  BANK_ACCOUNT_PERMIT 开户许可  BANK_CARD 银行卡'
        },
        multiple: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否多选，默认单选，选择ocr识别时限制为单选'
        },
        disabled: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否禁用上传'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitCertificateUpload },
    setup() {
        const change = data => {
            // console.log('change  data -  22 -  ', data);
        };
        const submit = data => {
            // console.log('submit  data -  33 -  ', data);
        };
        const start = data => {
            // console.log('start  data -  33 -  ', data);
        };
        const finished = data => {
            // console.log('finished  data -  33 -  ', data);
        };
        return { args, change, submit, start, finished };
    },
    template: `
        <div style="width: 20%;">
            <ZwUnityKitCertificateUpload v-bind="args" v-model="args.modelValue" v-model:imageList="args.imageList" @change="change" @submit="submit" @start="start" @finished="finished" />
        </div>
    `
});

/**
 *  默认演示
 */
export const Default = Template.bind({});
Default.args = {
    multiple: true,
    limitNum: 2,
    uploadTips: '支持JPG、BMP、PNG格式，图片大小不能超过1M',
    uploadLabel: '上传图片'
};

/**
 *  默认回显
 */
export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
    modelValue: ['123456', 'abcdefg'],
    imageList: [
        {
            code: '123456',
            url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/permanent-file/2023-08-21/agZz2XdJ57vlGV4nKk1s3pOwyqkeEA839PWx.jpeg'
        },
        {
            code: 'abcdefg',
            url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/permanent-file/2023-08-16/kK7J1EXZR3VrGvova2lHX3Oq8QldbzAYmBey.jpg'
        }
    ],
    multiple: true,
    limitNum: 2,
    uploadTips: '支持JPG、BMP、PNG格式，图片大小不能超过1M',
    uploadLabel: '上传图片'
};

/**
 *  需要ocr识别
 */
export const OcrModel = Template.bind({});
OcrModel.args = {
    ocrType: 'RESIDENT_CARD_NATIONAL_EMBLEM'
};

/**
 *  需要ocr识别回显
 */
export const OcrModelSelected = Template.bind({});
OcrModelSelected.args = {
    multiple: false,
    modelValue: '4356457632',
    imageList: {
        code: '4356457632',
        url: 'https://img-scrm-dev.keyid.cn/keyid-scrm-server/permanent-file/2023-08-16/kK7J1EXZR3VrGvova2lHX3Oq8QldbzAYmBey.jpg'
    },
    ocrType: 'RESIDENT_CARD_NATIONAL_EMBLEM'
};
